<template>
    <div>
        <div class="title">热销推荐</div>
        <ul class="item-content">
            <router-link tag="li" :to="'/detail/'+item.id" class="item border-bottom" v-for="item of recommendList" :key="item.id">
                <img class="item-img" :src="item.imgUrl" />
                <div class="item-info">
                    <p class="item-title">{{ item.title }}</p>
                    <p class="item-desc">{{ item.desc }}</p>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'HomeRecommend',
    props: {
        recommendList: Array
    }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/mixins.styl'
    .title
        margin-top .2rem
        line-height .8rem
        background #eeeeee
        padding-left .2rem
    .item-content
        padding-left .2rem
        .item
            display flex
            padding .2rem 0
            overflow hidden
            .item-img
                width 1.7rem
                height 1.7rem
            .item-info
                flex 1
                min-width 0
                height 1.7rem
                margin-left .2rem
                overflow hidden
                .item-title
                    font-size .32rem
                    color #212121
                    line-height .44rem
                    ellipsis()
                .item-desc
                    font-size 0.24rem
                    color #999
                    margin-top .2rem
                    ellipsis()
</style>


